<template>
    <div class="n-dj">
        <h3 class="nav-bar">热门主播</h3>
        <ul class="hot-dj-list">
            <HotDjItem v-for="(item, index) in hot_dj_list" v-bind="{ ...item }"></HotDjItem>
        </ul>
    </div>

</template>
<script setup>
import HotDjItem from './HotDjItem.vue';
import hot_dj_list from '@/json_data/hot_dj_list.json'
</script>
<style lang="scss" scoped>
.n-dj {
    margin-top: 30px;

    .nav-bar {
        position: relative;
        height: 23px;
        margin: 0 20px;
        border-bottom: 1px solid #ccc;
        color: #333;
    }

    .hot-dj-list {
        margin: 20px 0 0 20px;

    }
}
</style>